<template>
  <div class="history">
    <!--标题B-->
    <div class="pagetitle">
      <div class="pageText">
        <span>历史记录</span>
      </div>
    </div>
    <!--标题E-->

    <!--条件B-->
    <div class="condition">
      <el-row>
        <el-col :span="5">
          <el-date-picker style="width: 100%;" @change="trandate" v-model="pst" value-format="timestamp" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span=".5">
          &nbsp;
        </el-col>
        <el-col :span="3">
          <div class="psw" :style="checkpoint ? 'border-color: #00C244;' : 'border-color: #DCDFE6;'"
            @click="opencheckpoint" v-click-outside="checkpointClose">
            <div class="sel_one" :title="checkpointname" :style="checkpointname == '卡口' ? 'color: #ccc' : 'color: #000'">
              {{ checkpointname }}
            </div>
            <span style=" color: #ccc;" :class="checkpoint ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></span>

            <!--布设人员 卡口-->
            <div class="wcr" v-show="checkpoint">
              <el-checkbox-group v-model="checkpoint_pick_list" @change='btn_getsite'>
                <el-checkbox style="margin-right: 10px;" v-for="wr in checkpoint_list" :key="wr.value"
                  :label="wr.label"></el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 布设人员 -->

          </div>
        </el-col>
        <el-col :span=".5">
          &nbsp;
        </el-col>
        <el-col :span="3">
          <div class="psw" :style="cu_stuts ? 'border-color: #00C244;' : 'border-color: #DCDFE6;'" @click="opencu"
            v-click-outside="cuClose">
            <div class="sel_one" :title="cu_name" :style="cu_name == '车辆/人员' ? 'color: #ccc' : 'color: #000'">
              {{ cu_name }}
            </div>
            <span style=" color: #ccc;" :class="cu_stuts ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></span>

            <!--布设人员-->
            <div class="wcr" v-show="cu_stuts">
              <el-checkbox-group v-model="cu_pick_list" @change='getcu'>
                <el-checkbox style="margin-right: 10px;" v-for="wr in cu_list" :key="wr.value"
                  :label="wr.label"></el-checkbox>
              </el-checkbox-group>
            </div>
            <!--布设人员-->

          </div>
        </el-col>
        <el-col :span=".5">
          &nbsp;
        </el-col>
        <!-- <el-col :span="3">
          <div class="psw"
               :style="bill_stuts?'border-color: #00C244;':'border-color: #DCDFE6;'"
               @click="openbill"
               v-click-outside="billClose">
            <div class="sel_one"
                 :title="bill_name"
                 :style="bill_name=='黑白名单'?'color: #ccc':'color: #000'">
              {{bill_name}}
            </div>
            <span style=" color: #ccc;" :class="bill_stuts?'el-icon-arrow-up':'el-icon-arrow-down'"></span>

        
            <div class="wcr" style="width: 600px;" v-show="bill_stuts">
              <el-checkbox-group v-model="bill_pick_list" @change='getbill'>
                <el-checkbox style="margin-right: 10px;" v-for="wr in bill_list"
                             :key="wr.value"
                             :label="wr.label"></el-checkbox>
              </el-checkbox-group>
            </div>
       

          </div>
        </el-col> -->
      </el-row>

      <div class="cancelf" style="position: absolute;top: 0;right: 0.4rem;" @click="clearcondition">
        <span>重置条件</span>
      </div>
    </div>
    <!--条件E-->

    <table>
      <thead style="height: 60px;">
        <th>时间</th>
        <th>卡口</th>
        <th>车辆/人员</th>
        <!-- <th>黑白名单</th> -->
        <!-- <th>分组</th> -->
        <th>照片</th>
      </thead>
      <tbody>
        <tr v-for="item in list">
          <td>{{ time(item.appearTime) }}</td>
          <td>{{ item.deviceName }}</td>
          <td>{{ item.detectTarget == '1' ? '人员' : '车辆' }}</td>
          <!-- <td>{{ hbmd(item.status) }}</td> -->
          <!-- <td><img :src="item.imageUrl" alt="" style="width: 1.2rem;height: .7rem;"> </td> -->
          <td>
            <el-image style="width: 120px; height: 70px" :src="item.imageUrl" :preview-src-list="srcList">
            </el-image>
          </td>
          <!-- <span
            v-if="!item.isCheck"
            @click="check(item)"
            style="color: rgb(64, 158, 255);margin-right: .1rem;cursor: pointer">
            审核</span>
          <span
            v-if="item.isCheck"
            @click="openhdo(item)"
            style="color: rgb(64, 158, 255);margin-right: .1rem;cursor: pointer">
            详情</span>
          <span @click="delcar(item.id)"
                style="color: rgb(64, 158, 255);margin-right: .1rem;cursor: pointer">
            删除</span> -->
          
        </tr>
      </tbody>
    </table>

    <div class="pagingbox">
      <el-pagination  @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="5"  layout="total, prev, pager, next, jumper" :total="totalElements">
      </el-pagination>
    </div>

    <!--审核-->
    <div class="audit" v-if="isCheck">
      <!--标题B-->
      <div class="pagetitle" style="border-bottom: 1px solid #e5e9ef;">
        <div class="pageText">
          <span>审核</span>
        </div>
        <div class="cancelf" @click="closeadiut('ruleForm')" style="position: absolute;right: .2rem;">
          <span>返回</span>
        </div>
      </div>
      <!--标题E-->
      <div class="Capture">
        <div style="margin-left: .4rem;line-height: .5rem;">
          <span style="font-size: .16rem;font-weight: 700">抓拍照片</span>
        </div>
        <div style="display: flex">
          <div class="CapturePhoto">
            <!--'photo'-->
            <!--<img :src="winfo.image[0].path" alt="">-->
            <!--<img v-if="winfo.image[1]!=undefined" :src="winfo.image[1].path" alt="">-->

            <viewer style="overflow: hidden" :images="photo">
              <img style="width: 2rem;height: 2rem;" v-for="(src, index) in photo" :src="src" :key="index">
            </viewer>

          </div>
          <div class="CaptureText">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="时间">
                    <el-input :disabled="true" v-model="ruleForm.creatTime"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="抓拍地点">
                    <el-input :disabled="true" v-model="ruleForm.deviceName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item v-if="iscar" label="车牌号" prop="plateNo">
                    <el-input v-model="ruleForm.plateNo"></el-input>
                  </el-form-item>
                  <el-form-item v-if="!iscar" label="人员姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item v-if="iscar" label="车辆类型" prop="vehicleType">
                    <el-select style="width: 100%;" v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
                      <el-option label="大型车" value="大型车"></el-option>
                      <el-option label="小型车" value="小型车"></el-option>
                      <el-option label="摩托车" value="摩托车"></el-option>
                      <el-option label="其他车" value="其他车"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item v-if="!iscar" label="人员性别" prop="sex">
                    <el-select style="width: 100%;" v-model="ruleForm.sex" placeholder="请选择人员性别">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>

                </el-col>
                <el-col :span="8">
                  <el-form-item v-if="iscar" label="车辆颜色" prop="vehicleColor">
                    <el-select style="width: 100%;" v-model="ruleForm.vehicleColor" placeholder="请选择车辆颜色">
                      <el-option label="白色" value="白色"></el-option>
                      <el-option label="银色" value="银色"></el-option>
                      <el-option label="灰色" value="灰色"></el-option>
                      <el-option label="黑色" value="黑色"></el-option>
                      <el-option label="红色" value="红色"></el-option>
                      <el-option label="深蓝色" value="深蓝色"></el-option>
                      <el-option label="蓝色" value="蓝色"></el-option>
                      <el-option label="黄色" value="黄色"></el-option>
                      <el-option label="绿色" value="绿色"></el-option>
                      <el-option label="棕色" value="棕色"></el-option>
                      <el-option label="粉色" value="粉色"></el-option>
                      <el-option label="紫色" value="紫色"></el-option>
                      <el-option label="深灰" value="深灰"></el-option>
                      <el-option label="杏色" value="杏色"></el-option>
                      <el-option label="未识别的车辆颜色" value="未识别的车辆颜色"></el-option>
                      <el-option label="其他颜色" value="其他颜色"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="审核结果" prop="status">
                    <el-select style="width: 100%;" v-model="ruleForm.status" placeholder="请选择审核结果">
                      <el-option label="白名单" value="white"></el-option>
                      <el-option label="黑名单" value="black"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="分组" prop="groupName">
                    <el-select style="width: 100%;" v-model="ruleForm.groupName" placeholder="请选择分组">
                      <el-option v-for="(item, index) in nList" :key="index" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备注">
                    <el-input v-model="ruleForm.mark"></el-input>
                  </el-form-item>

                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <!--<el-button @click="resetForm('ruleForm')">取消</el-button>-->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>

      <!--相似度-->
      <div v-if="winfo.similarityList.length > 0" class="similarity clearfix">
        <div v-for="item in winfo.similarityList " @click="affirm(item)">
          <div style="height: 2rem;width: 100%;overflow: hidden">
            <img style="width: 100%;height: 100%;" :src="item.faceUrl" alt="">
          </div>
          <div style="line-height: .25rem;text-align: center;font-weight: 700">
            <div>
              <span>{{ item.name }}</span>
            </div>
            <div>
              <span>相似度{{ item.similarity }}%</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="winfo.similarityList.length == 0">
        <div style="margin: .2rem">
          <span style="font-size: .18rem;font-weight: 700">暂无相似照片</span>
        </div>
      </div>
      <!--相似度-->

    </div>
    <!--审核-->

    <!--详情-->
    <div class="hdetails" v-if="ishd">
      <div>
        <!--标题B-->
        <div style="width: 100%;height: .6rem;position: relative;border: 1px solid #E4E7ED;">
          <div @click="closehd" class="cancelf" style="position: absolute;top: 0.1rem;right: .2rem;">
            <span>关闭</span>
          </div>
        </div>
        <!--标题E-->
        <div style="margin-top: .1rem;width: 100%;height: 5rem;display: flex">
          <div
            style="flex: 6;padding-left: .1rem;display: flex;align-items: center;justify-content: center;border-right: 1px solid #E4E7ED;overflow: hidden">
            <img style="max-width: 100%;max-height:100%" :src="hdobj.mediaList[0].path" alt="">
          </div>
          <div style="flex: 4;padding-left: .2rem;">
            <div class="htxt">
              <span>时间：</span>
              <span>{{ time(hdobj.insertTime) }}</span>
            </div>
            <div class="htxt">
              <span>抓拍点位：</span>
              <span>{{ kdgl(hdobj.deviceId) }}</span>
            </div>
            <div v-if="hdobj.modelType == 'user'" class="htxt">
              <span>人员姓名：</span>
              <span>{{ hdobj.checkData.name }}</span>
            </div>
            <div v-if="hdobj.modelType == 'user'" class="htxt">
              <span>人员性别：</span>
              <span>{{ hdobj.checkData.sex }}</span>
            </div>
            <div v-if="hdobj.modelType == 'car'" class="htxt">
              <span>车牌号：</span>
              <span>{{ hdobj.checkData.plateNo }}</span>
            </div>
            <div v-if="hdobj.modelType == 'car'" class="htxt">
              <span>车辆类型：{{ hdobj.checkData.vehicleType }}</span>
              <span></span>
            </div>
            <div v-if="hdobj.modelType == 'car'" class="htxt">
              <span>车辆颜色：</span>
              <span>{{ hdobj.checkData.vehicleColor }}</span>
            </div>
            <div class="htxt">
              <span>黑白名单：</span>
              <span>{{ hbmd(hdobj.status) }}</span>
            </div>
            <div class="htxt">
              <span>分组：</span>
              <span>{{ hdobj.groupName }}</span>
            </div>
          </div>
        </div>
        <div style="height: .1rem;">

        </div>
      </div>
    </div>
    <!--详情-->


    <!--图片放大功能-->
    <div>
    </div>
    <!--图片放大功能-->

  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'
import { log } from 'ezuikit-js'

const clickOutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }

    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {
  },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}
export default {
  data() {
    return {
      t1: "",
      pst: "",
      srcList:[],
      startTime:'',
      endTime:'',
      // pageIndex:1,
      //卡口
      checkpoint: false,
      checkpointname: "卡口",
      checkpoint_pick_list: [],
      checkpointStr: "",
      checkpoint_list: [
        { value: "car1", label: "蚊坪管护点抓拍" },
        { value: "user1", label: "沙口黄洞管护点抓拍" }
      ],
      //车辆人员
      cu_stuts: false,
      cu_name: "车辆/人员",
      cu_pick_list: [],
      cuStr: "",
      cu_list: [
        { value: "car", label: "车辆" },
        { value: "user", label: "人员" },
        { value: "usercar", label: "车辆/人员" }
      ],
      //黑白名单
      bill_stuts: false,
      bill_name: "黑白名单",
      bill_pick_list: [],
      billStr: "",
      bill_list: [
        { value: "black", label: "黑名单" },
        { value: "white", label: "白名单" },
        { value: "unknown", label: "陌生人" },
      ],
      areaId: "",
      pageNum: 0,
      currentPage: 1,
      pageIndex: 1,
      list: [],
      totalElements: 10,
      isCheck: false,
      ruleForm: {
        groupName: "",
        creatTime: '',
        deviceName: "",
        plateNo: "",
        vehicleType: '',
        sex: "",
        vehicleColor: "",
        mark: "",
        status: "",
        name: ""
      },
      rules: {
        creatTime: [
          { required: true, message: '请输入车牌号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输人人员姓名', trigger: 'blur' }
        ],
        vehicleType: [
          { required: true, message: '请选择车辆类型', trigger: 'change' }
        ],
        vehicleColor: [
          { required: true, message: '请选择车辆颜色', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择审核结果', trigger: 'change' }
        ],
        groupName: [
          { required: true, message: '请选择分组', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择人员性别', trigger: 'change' }
        ],
      },
      iscar: true,
      photo: [],
      winfo: {
        image: [{ path: "" }]
      },
      lid: "",
      faceId: "",
      faceUrl: "",
      hdobj: {},
      ishd: false,
      modelType: "car",
      nList: [],
      gName: ""
    }
  },
  mounted() {
  },
  directives: { clickOutside },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
    this.gateWarning();
    this.gateWarningpage();
    // this.getNameList()
  },
  methods: {
    // getNameList(data) {
    //   let vm = this;
    //   (async function f() {
    //     let res = await http.get(api.car.newnameList, {
    //       pageIndex: vm.currentPage,
    //       pageSize: 5,
    //       deviceName: vm.checkpoint_pick_list,
    //       detectTarget:vm.cu_pick_list
    //     })
    //     if (res.data.code == '200') {
    //       vm.nList = res.data.data;
    //     }
    //   })()
    // },
    closehd() {
      this.ishd = false;
    },
    openhdo(data) {
      this.hdobj = data;
      this.ishd = true;
    },
    affirm(data) {
      this.faceId = data.id;
      this.faceUrl = data.faceUrl;
      this.ruleForm.name = data.name;
      this.ruleForm.sex = data.sex;
      if (data.status == 'unknown') {
        this.ruleForm.status = "";
      } else {
        this.ruleForm.status = data.status;
      }
      this.ruleForm.status = data.status;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var obj = {}
          if (this.iscar) {
            obj = {
              id: this.lid,
              status: this.ruleForm.status,
              modelType: 'car',
              plateNo: this.ruleForm.plateNo,
              vehicleType: this.ruleForm.vehicleType,
              vehicleColor: this.ruleForm.vehicleColor,
              ownerName: "",
              groupName: this.ruleForm.groupName
            }
          } else {
            obj = {
              id: this.lid,
              status: this.ruleForm.status,
              modelType: 'user',
              faceUrl: this.faceUrl,
              faceId: this.faceId,
              name: this.ruleForm.name,
              sex: this.ruleForm.sex,
              certificateType: "",
              certificateNum: "",
              groupName: this.ruleForm.groupName
            }
          }
          var vm = this;
          (async function () {
            let res = await http.post(api.car.gwarn, obj)
            if (res.data.code == '200') {
              vm.$message({
                message: '保存成功',
                type: 'success'
              });
              vm.gateWarningpage();
            } else {
              vm.$message({
                message: '保存失败，网络异常',
                type: 'warning'
              });
            }
          })()

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    closeadiut(formName) {
      this.$refs[formName].resetFields();
      this.isCheck = false;
      this.faceId = '';
      this.faceUrl = '';
      this.photo = [];
    },
    check(data) {
      this.lid = data.id;
      var vm = this;
      (async function () {
        let res = await http.get(api.car.warning + "?warningId=" + data.id)
        if (res.data.code == '200') {
          res.data.data.image.forEach((image, index) => {
            if (index < 2) {
              vm.photo.push(image.path);
            }
          })
          vm.winfo = Object.assign({}, res.data.data);
          vm.ruleForm.creatTime = res.data.data.info.creatTime;
          vm.ruleForm.deviceName = res.data.data.info.deviceName;
          if (res.data.data.info.status == 'unknown') {
            vm.ruleForm.status = ''
          } else {
            vm.ruleForm.status = res.data.data.info.status;
          }
          if (data.modelType == 'car') {
            vm.ruleForm.plateNo = res.data.data.info.plateNo;
            vm.ruleForm.vehicleType = res.data.data.info.vehicleType;
            vm.ruleForm.vehicleColor = res.data.data.info.vehicleColor;
            vm.iscar = true;
            // vm.getNameList('car');
          } else {
            vm.faceUrl = res.data.data.image[0].path;
            vm.ruleForm.sex = res.data.data.info.sex;
            vm.iscar = false;
            // vm.getNameList('user');
          }
          vm.isCheck = true;
        }
      })();
    },
    kdgl(t) {
      let value = ''
      this.checkpoint_list.forEach(e => {
        if (t == e.value) {
          value = e.name
        }
      })
      return value;
    },
    hbmd(t) {
      if (t == 'black') {
        return '黑名单'
      }
      if (t == 'white') {
        return '白名单'
      }
      if (t == 'unknown') {
        return '陌生名单'
      }
    },
    gateWarningpage(a, b) {
      var then = this;
      (async function () {
        let res = await http.get(api.car.newnameList, {
          "pageIndex": then.pageIndex,
          'pageSize': 5,
          // "pageNum": then.pageNum,
          // "areaId": then.areaId,
          'startTime': a,
          'endTime': b,
          "deviceName": then.checkpointname,
          "detectTarget": then.cu_name,
    
          // "statusStr": then.billStr,
          // "timeStr": then.t1
        })
        console.log(res, 'res');
        if (res.data.code == '200') {
          then.list = res.data.data.records;
          then.totalElements = res.data.data.total;
          res.data.data.records.forEach(e => {
            then.srcList.push(e.imageUrl)
          })
        } else {
          then.warn(res.data.message)
        }
      })()
    },
    gateWarning() {
      var then = this;
      (async function () {
        let res = await http.post(api.car.gateWarning + '?areaId=' + then.areaId)
        if (res.data.code == '200') {
          // then.checkpoint_list = res.data.data
        } else {
          then.warn(res.data.message)
        }
      })()
    },
    delcar(data) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let vm = this;
        (async function () {
          let res = await http.delete(api.car.delete + '?id=' + data)
          if (res.data.code == '200') {
            vm.$message({
              type: 'success',
              message: '删除成功!'
            });
            vm.gateWarningpage();
          } else {
            vm.$message({
              type: 'info',
              message: '删除失败'
            });
          }
        })()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // handleSizeChange(val) {
    //   // this.pageIndex = val + 1;
    //   this.gateWarningpage();
    // },
    handleCurrentChange(val) {
      console.log(val );
      this.pageIndex = val;
      this.gateWarningpage();
    },
    clearcondition() {
      this.pst = '';
      this.t1 = '';
      this.checkpointname = '卡口';
      this.checkpoint_pick_list = [];
      this.cu_name = '车辆/人员';
      this.cu_pick_list = [];
      this.bill_name = '黑白名单';
      this.bill_pick_list = [];
      this.checkpointStr = "";
      this.cuStr = "";
      this.billStr = "";
      this.pageNum = 0;
      this.currentPage = 1;
      // this.gateWarningpage();
    },
    //卡口
    opencheckpoint() {
      this.checkpoint = !this.checkpoint;
    },
    checkpointClose() {
      this.checkpoint = false
    },
    getsite(e) {
      // let idList = [];
      // this.checkpoint_pick_list.forEach(e => {
      //   this.checkpoint_list.forEach(s => {
      //     if (e == s.label) {
      //       idList.push(s.value);
      //     }
      //   })
      // })
      // this.checkpointname = this.checkpoint_pick_list.join("、");
      // this.checkpointStr = idList.join(",");
      // this.pageNum = 0;
      // this.currentPage = 1;
      // this.gateWarningpage();
      // if (this.checkpoint_pick_list.length == 0) {
      //   this.checkpointname = '卡口'
      // }
      // console.log(idList);
    },
    btn_getsite() {
      let idList = [];
      this.checkpoint_pick_list.forEach(e => {
        console.log(e, 'e');
        this.checkpoint_list.forEach(s => {
          console.log(s, 's');
          if (e == s.label) {
            idList.push(s.label);
          }
        })
      })
      this.checkpointname = this.checkpoint_pick_list.join("、");
      this.checkpointStr = idList.join(",");
      this.pageNum = 0;
      this.currentPage = 1;
      this.gateWarningpage();
      if (this.checkpoint_pick_list.length == 0) {
        this.checkpointname = '卡口'
      }
      console.log(idList);
    },
    //车辆
    opencu() {
      this.cu_stuts = !this.cu_stuts;
    },
    cuClose() {
      this.cu_stuts = false
    },
    getcu() {
      let idList = [];
      this.cu_pick_list.forEach(e => {
        this.cu_list.forEach(s => {
          if (e == s.label) {
            idList.push(s.value);
          }
        })
      })
      this.cu_name = this.cu_pick_list.join("、");
      this.cuStr = idList.join(",");
      this.pageNum = 0;
      this.currentPage = 1;
      this.gateWarningpage();
      if (this.cu_pick_list.length == 0) {
        this.cu_name = '车辆/人员'
      }
    },
    //黑白名单
    openbill() {
      this.bill_stuts = !this.bill_stuts;
    },
    billClose() {
      this.bill_stuts = false
    },
    getbill() {
      let idList = [];
      this.bill_pick_list.forEach(e => {
        this.bill_list.forEach(s => {
          if (e == s.label) {
            idList.push(s.value);
          }
        })
      })
      this.bill_name = this.bill_pick_list.join("、");
      this.billStr = idList.join(",");
      this.pageNum = 0;
      this.currentPage = 1;
      this.gateWarningpage();
      if (this.bill_pick_list.length == 0) {
        this.bill_name = '黑白名单'
      }
    },
    trandate(daterange) {
      console.log(daterange, 'daterange');
      this.startTime = daterange[0];
      this.endTime = daterange[1];
      console.log(this.startTime, this.endTime);
      this.gateWarningpage(this.startTime  ,  this.endTime) 
      // if (this.pst != null) {
      //   var year = daterange[0].getFullYear();
      //   var month = daterange[0].getMonth() + 1;
      //   var date = daterange[0].getDate();
      //   if (month >= 1 && month <= 9) {
      //     month = "0" + month;
      //   }
      //   if (date >= 0 && date <= 9) {
      //     date = "0" + date;
      //   }
      //   var t1 = year + "-" + month + "-" + date;
      //   var years = daterange[1].getFullYear();
      //   var months = daterange[1].getMonth() + 1;
      //   var dates = daterange[1].getDate();
      //   if (months >= 1 && months <= 9) {
      //     months = "0" + months;
      //   }
      //   if (dates >= 0 && dates <= 9) {
      //     dates = "0" + dates;
      //   }
      //   var t2 = years + "-" + months + "-" + dates;
      //   this.t1 = t1 + "~" + t2
      //   console.log(this.t1, 'this.t1');
      // } else {
      //   this.t1 = "";
      // }
      this.pageNum = 0;
      this.currentPage = 1;
      // this.gateWarningpage();
    },

    time(t) {
      let time = new Date(t),
        year = time.getFullYear(),
        month = time.getMonth() + 1,
        date = time.getDate(),
        oHour = time.getHours(),
        oMin = time.getMinutes(),
        oSen = time.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (date >= 0 && date <= 9) {
        date = "0" + date;
      }
      if (oHour >= 1 && oHour <= 9) {
        oHour = "0" + oHour;
      }
      if (oMin >= 0 && oMin <= 9) {
        oMin = "0" + oMin;
      }
      if (oSen >= 0 && oSen <= 9) {
        oSen = "0" + oSen;
      }
      return year + "-" + month + "-" + date + ' ' + oHour + ':' + oMin + ':' + oSen;
    },
    success(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'success',
      });
    },
    warn(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'warning'
      });
    },
  }
}
</script>
<style scoped>
@import "../../static/css/history.css";
</style>
